<#assign menuId=3>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>新建打样-${Application.systemName!}</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Ionicons -->
        <link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" type="text/css" href="../css/bootstrap-select.css">
		<!--datetimepicker-->
		<link rel="stylesheet" type="text/css" href="../css/datetimepicker/bootstrap-datetimepicker.min.css"/>
        <link href="../css/myself.css" rel="stylesheet" type="text/css" />
	  
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
			    vertical-align: middle;
			}
    		.bold{
    			font-size: 14px;
    		}
    		ul li{
    			list-style: none;
    			margin-top: 10px;
    		}
    		.pull-left{
    			border-left: 6px solid #3882FF;
    			padding: 0 5px;
    		}
    		.custormView{
    			margin-top: 10px;
    		}
    		
	        label{
	        	display: inline-block;
	        	margin: 0;
	        }
	        .row{
	        	padding: 0 0 0 20px;
	        }
	        
	         
    	</style>
    </head>
    <body class="skin-blue">
        <!-- header logo: style can be found in header.less -->
         <#include "../header.html"/>
        <div class="wrapper row-offcanvas row-offcanvas-left">
            <!-- Left side column. contains the logo and sidebar -->
            <#include "../menu.html"/>

            <!-- Right side column. Contains the navbar and content of the page -->
            <aside class="right-side">
            	<section class="content-header">
                    <h1>创建打样订单</h1>
                    <ol class="ol_left">
		                <li>当前位置：</li>
		                <li><a href="list">打样订单</a></li>
		                <li>> 创建打样订单</li>
		            </ol>
		            <hr class="no-margin" />
               </section>
                <!-- Content Header (Page header) -->
                <section class="content">
                    <div class="row">
                    	<div class="col-md-12">
                            <div class="box">
			                    <div class="clearfix center" style="margin-bottom: 15px">
			                    	<span class="pull-left bold">订单信息</span> 
				                    <span class="pull-right">
			                    		<span class="six-font">设计款数${orderPatterList?size}款   </span>
			                    		<#if designOrderResult.enddateCnt?? && designOrderResult.enddateCnt gt 0>
	                                    <span class="six-font">剩余${designOrderResult.enddateCnt!}天</span>
	                                    <#elseif designOrderResult.enddateCnt?? && designOrderResult.enddateCnt lt 0>
	                                    <span class="six-font red">超期${designOrderResult.enddateCnt!}天</span>
	                                    <#else>
	                                    <span class="six-font">剩余${designOrderResult.enddateCnt!}天</span>
	                                    </#if>
			                    	 </span>
			                    </div>
                                <div class="center">
                                    <div class="bold">填写基本信息</div>
                                    <form id="form">
                                    <table class="table table-bordered custormView">
                                        <tr>
                                            <td class="col-md-2">客户名称</td>
                                            <td colspan="3">
                                            	   ${designOrderResult.customer.fullname!}
                                            </td>
                                        </tr>
                                        <tr>
                                        	<td class="col-md-2">
                                        		<label class="red">*</label>
                                        		打样截止时间
                                        	</td>
                                        	<td class="col-md-4">
												<div class="input-group date form_datetime col-md-7">
													<input id="proofingEndDate" class="form-control"   type="text" name="proofingEnddate" value=""> 
													<span class="input-group-addon">
														<span class="glyphicon glyphicon-th"></span>
													</span>
												</div>
                                        	</td>
                                        	<td  class="col-md-2">大货截止时间</td>
                                        	<td class="col-md-4">
												<div class="input-group date form_datetime col-md-7">
													<input id="productionEndDate" class="form-control" type="text" name="productionEnddate" value=""> 
													<span class="input-group-addon">
														<span class="glyphicon glyphicon-th"></span>
													</span>
												</div>
                                        	</td>
                                        </tr>
                                        <tr>
                                        	<td class="col-md-2">客户需求</td>
                                        	<td colspan="3">
                                        		<div class="form-group textarea">
		                                            <textarea class="form-control" rows="3" name="requirement" placeholder="">${designOrderResult.requirement!}</textarea>
		                                        </div>
                                        	</td>
                                        </tr>
                                    </table>
                                    </form>
		                            <div class="clearfix">
		                                <span class="pull-left bold">选择打样款型</span> 
		                            </div>
                                    <#list orderPatterList as orderPatter>
                                    <table class="table table-bordered custormView">
                                        <tr>
                                            <td colspan="7"  class="left-text">
                                                <span><#if designOrderResult.createdAt??>${designOrderResult.createdAt?string("yyyy-MM-dd")}</#if></span>
                                                <span>订单号：${designOrderResult.code!}</span>
                                                <a href="../orderpattern/detail?id=${orderPatter.id!}" class="fr bule-border">查看明细</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="60%">
                                                <span class="Design_draft"><img src="${Application.accessFileUrl!}${orderPatter.mainImage!}" alt="" /></span>
                                            </td>
                                            <td class="rel" colspan="6" style="vertical-align: top;" >
                                                <i class="design-icon"></i>
                                                <div class="design-text">
                                                    <p>设计编号：<span>${orderPatter.code!}<span></p>
                                                    <p>款号：<span>${orderPatter.patternNo!}</span></p>
                                                    <p>年份：<span>${orderPatter.period!}</span></p>
                                                    <p>季节：<span>${orderPatter.season!}</span></p>
                                                    <p>性别：<span>${orderPatter.sex!}</span></p>
                                                    <#list orderPatter.styleLabelConstants as constant>
                                                    <span class="bule-border">${constant.name!}</span>
                                                    </#list>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" style="text-align: center; background: rgb(246,246,246);">
                                                <a href="javascript:addAmount(${orderPatter_index});">选择此款，填写数量 </a>
                                            </td>
                                        </tr>
                                       	<tr id="patternAmount_${orderPatter_index}" style="display:none">
                                       		<td colspan="2" class="center_list">
                                       			<table class="table table-bordered" id="tab_${orderPatter.id}" >
                                       				<tr>
                                       					
                                       					<th>颜色</th>
                                       					<th>XS</th>
                                       					<th>S</th>
                                       					<th>M</th>
                                       					<th>L</th>
                                       					<th>XL</th>
                                       					<th>XXL</th>
                                       					<th></th>
                                       				</tr>
                                       			
                                       				
                                       					<tr>
                                       					<td colspan="8">
                                       						<a href="javascript:addRow(${orderPatter.id})">+添加一行</a>
                                       					</td>
                                       				</tr>
                                       			</table>
                                       		</td>
                                       	</tr>
                                       	<tr  id="patternAmount_sum_${orderPatter_index}" style="display:none">
	                                        <td colspan="2"  class="right-text">
	                                            <span id="patternAmount_sum_span_${orderPatter.id}" class="pull-right">总计件数：<span id="count">0</span>件</span>
	                                        </td>
	                                    </tr>
                                    </table>
                                    </#list>
                                    <p>
                                    	<button type="button" id="addbtn" class="btn btn-primary" style="margin-right: 10px;">共<span id="pattern_count">0</span>款&nbsp;&nbsp;&nbsp;&nbsp;确定创建</button>
                                    	<button type="button" class="btn btn-default" id="repeal">取消</button>
                                    </p>
                        		</div>
                            </div><!-- /.box -->

                            
                        </div><!-- /.col -->
                        
                    </div><!-- /.row -->
                    
                </section>

                <!-- Main content -->
                <section class="content">
					
				
                </section><!-- /.content -->
                
                
            </aside><!-- /.right-side -->
        </div><!-- ./wrapper -->


        <!-- jQuery 2.0.2 -->
        <script src="../js/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="../js/bootstrap.min.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="../js/AdminLTE/app.js" type="text/javascript"></script>
        <!-- AdminLTE for demo purposes -->
      
       
		<script type="text/javascript" src="../js/bootstrap-select.js"></script> 
		 <!--datepickes-->
		<script src="../js/plugins/datetimerpicker/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
	
		<script src="../js/plugins/datetimerpicker/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
		<script src="../js/jquery.form.min.js"></script>
    </body>
    <script type="text/javascript">
    	
			
			$(function() {
				$('#productionEndDate').datetimepicker({
					format: 'yyyy-mm-dd hh:00',
			    	language:  'zh-CN',  
		            weekStart: 1,  
		            todayBtn:  1,  
		            autoclose: 1,  
		            todayHighlight: 1,  
		            startView: 2,  
		            forceParse: 0,
		            showMeridian: 0,
		            minView: 1,
		            startDate: new Date()
			    }).on("changeDate",function(ev){
			    	var productionEndDate = $('#productionEndDate').val();
			    	$('#proofingEndDate').datetimepicker('setEndDate',productionEndDate);
			    });
				$('#productionEndDate').next().click(function(){
			    	$('#productionEndDate').datetimepicker('show');
			    });
			    $('#proofingEndDate').datetimepicker({
			    	format: 'yyyy-mm-dd hh:00',
			    	language:  'zh-CN',  
		            weekStart: 1,  
		            todayBtn:  1,  
		            autoclose: 1,  
		            todayHighlight: 1,  
		            startView: 2,  
		            forceParse: 0,
		            showMeridian: 0,
		            minView: 1,
		            startDate: new Date()
			    }).on("changeDate",function(ev){
			    	var proofingEndDate = $('#proofingEndDate').val();
			    	$('#productionEndDate').datetimepicker('setStartDate',proofingEndDate);
			    });
			    $('#proofingEndDate').next().click(function(){
			    	$('#proofingEndDate').datetimepicker('show');
			    });
		
			  

			    $("#addbtn").click(function(){ 
			    	if(!checkCount()) return false;
			    	if(!checkDate()) return false;
			    	if(!checkColor()) return false;
			    	var dataList = new Array();
			    	<#list orderPatterList as orderPatter>
				    	var len = $("#tab_${orderPatter.id}").find("tr").length;
						for(var i =1;i<len-1;i++){
							var data = {};
							data["orderPatternId"] = ${orderPatter.id};
							for(var j=0;j<7;j++){
								var name = $("#tab_${orderPatter.id}").find("tr").eq(i).find("td").eq(j).find("input").attr("name");
								var val = $("#tab_${orderPatter.id}").find("tr").eq(i).find("td").eq(j).find("input").val();
								data[name] =val;
							}
							dataList.push(data);
						}
			    	</#list>
			    	
			    	$("#form").ajaxSubmit({
	                    type: "POST",
	                    dataType: "json",
	                    url: "doCreateProofingOrder",
	                    data: {patternSizeList:dataList,orderId:${orderId}},
	                    contentType : 'application/x-www-form-urlencoded; charset=UTF-8',  
	                    success : function(map) {  
	                    	if(map.head.respCode=="0000000"){
	    	                	alert("保存成功");
	    	                	window.location.href="list";
	    	                }else{
	    	                	alert(map.body);
	    	                }
	    	            },  
	    	            error : function(map) {  
	    	                alert("出现错误，请刷新页面");  
	    	            }  

	                });
		      	  });
			    
			});
			function addAmount(index){
				var count=$('#pattern_count').html();
		    	count=parseInt(count);
		    	if(document.getElementById("patternAmount_"+index).style.display=="none"){
		    		document.getElementById("patternAmount_"+index).style.display="";
		    		document.getElementById("patternAmount_sum_"+index).style.display="";
		    		$('#pattern_count').html(++count);
		    	}else{
		    		document.getElementById("patternAmount_"+index).style.display="none";
		    		document.getElementById("patternAmount_sum_"+index).style.display="none";
		    		$('#pattern_count').html(--count);
		    	}
		    	
		    	
		    }
			
			function addRow(id){
				var len = $("#tab_"+id).find("tr").length -2;
				$("#tab_"+id+" tr:eq("+len+")").after('<tr><td><input style="width:40px" name="color" type="text"/></td>'+
				'<td><input name="xsAmount" style="width:40px" type="text"/></td>'+
				'<td><input name="sAmount" style="width:40px" type="text"/></td>'+
				'<td><input name="mAmount" style="width:40px" type="text"/>'+
				'</td><td><input name="lAmount" style="width:40px" type="text"/></td>'+
                '<td><input name="xlAmount" style="width:40px" type="text"/></td>'+
                '<td><input name="xxlAmount" style="width:40px" type="text"/></td>'+
                '<td><div id="del_'+id+"_"+len+'" class="red_circle"><div></div></div></td></tr>');
				//$("#patternAmount_sum_span_"+id).text("总计件数："+($("#tab_"+id).find("tr").length -2)+"件");
				$("#tab_"+id+" tr:eq("+len+")").next().find('input:not(:first)').change(calculate).focus(getValue);
				$("#del_"+id+"_"+len).click(function(){
					var inputs=$(this).parent().prevAll(':not(:last)').find('input');
					var span=$(this).parents('table').eq(1).find('#count');
					var total=span.html();
					for(var i=0;i<inputs.length;i++){
						var count=inputs.eq(i).val();
						if(!count||isNaN(count)) continue;
						total-=count;
					}
					span.html(total);
					$(this).parent().parent().remove();
					//getPatternCnt();
				})
				//getPatternCnt();
			}
			
			function getPatternCnt(){
				var cnt = 0;
				<#list orderPatterList as orderPatter>
				var len = $("#tab_${orderPatter.id}").find("tr").length;
				if(len>2){
					cnt++;
				}
				</#list>
				$("#addbtn").html("共"+cnt+"款&nbsp;&nbsp;&nbsp;&nbsp;确定创建");
			}
			
			function calculate(){
				var count=$(this).val();
				var span=$(this).parents('table').eq(1).find('#count');
				var total=span.html();
				if(count&&!isNaN(count)){
					count=parseInt(count);
					total=parseInt(total)+count;
				}else{
					if(count){
						$(this).val('');
						alert('请输入数字');
					}
				}
				if(model.value&&!isNaN(model.value))
					total-=model.value;
				span.html(total);
			}
			
			model={};
			
			function getValue(){
				model.value=$(this).val();
			}
			
			$(function(){
				$('#repeal').click(function(){
					confirm('是否取消创建打样订单?放弃后当前填写的资料将无法保存',function(isConfirm){
						if(isConfirm) history.back();
					});
				});
			})
			
			function checkCount(){
				var spans=$('table').find('#count');
				for(var i=0;i<spans.length;i++){
					var count=spans.eq(i).html();
					if(count) return true;
				}
				alert('打样数量为0');
				return false;
			}
			
			function checkDate(){
				var date=$('[name=proofingEnddate]').val();
				if(!date){
					alert('打样截止时间未填');
					return false;
				}
				var reg=/^\w{4}-\w{2}-\w{2} \w{1,2}:\w{2}$/;
				if(!reg.test(date)){
					alert('打样截止时间不符');
					return false;
				}
				return true;
			}
			
			function checkColor(){
				var inputs=$('[name=color]');
				for(var i=0;i<inputs.length;i++){
					if(!inputs.eq(i).val()){
						alert('颜色未填写');
						return false;
					}
				}
				return true;
			}
    </script>
</html>
